import React, { Component, ReactElement } from 'react';
import { Menu } from 'antd';
import { Link, withRouter } from 'umi';
import { getMenuApi } from '@/apis/menu/menuAPI';
import { createFromIconfontCN, HomeOutlined } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2928153_a8ynxy9hpn5.js',
});

const { SubMenu } = Menu;

class SideMenu extends Component {
  state = {
    menuList: [],
  };
  componentDidMount() {
    this.getMenuList();
  }
  getMenuList = async () => {
    const res = await getMenuApi();
    if (res.status == 200) {
      this.setState({
        menuList: res.data.rows.children,
      });
    }
  };

  handleClick = (e) => {
    // console.log('click ', e);
    console.log('click ', this.props.history.location.pathname);
    // console.log(this.state.menuList);
  };
  render() {
    const { menuList } = this.state;
    return (
      <Menu
        theme="dark"
        onClick={this.handleClick}
        style={{ width: 256 }}
        defaultSelectedKeys={[this.props.history.location.pathname]}
        // defaultOpenKeys={['sub1']}
        mode="inline"
        style={{ backgroundColor: '#393e46', color: 'white', fontSize: '14px' }}
      >
        <Menu.Item key="0" icon={<HomeOutlined />}>
          {' '}
          <Link to="/home" style={{ color: 'white' }}>
            系统主页
          </Link>
        </Menu.Item>
        {menuList.map((item) => {
          return (
            <>
              <SubMenu
                key={item.id}
                icon={<IconFont type={`icon-${item.icon}`}></IconFont>}
                title={item.title}
              >
                {item.children.map((i) => {
                  return (
                    <Menu.Item key={i.id} style={{ fonSize: '14px' }}>
                      <Link to={i.path}>{i.title}</Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            </>
          );
        })}
      </Menu>
    );
  }
}

export default withRouter(SideMenu);
